<template>
  <div class="mainWrap">
    <div class="fWrap">
      <span class="dbTit">注册统计</span>
      <div class="fooItemWrap">
        <div class="fooItem">
          
          <span class="number">{{ regiest?.toDayUser || 0}}</span>
          <span class="title">今日注册</span>
        </div>
        <div class="fooItem">
          <span class="number">{{ regiest?.yesterDayUser || 0}}</span>
          <span class="title">昨日注册</span>
        </div>
        <div class="fooItem">
          <span class="number">{{ regiest?.totalAllUser || 0}}</span>
          <span class="title">平台总人数</span>
        </div>
      </div>
    </div>
    <div class="fWrap" style="margin-right: 0;" v-if="roles?.includes('SYS_ROOT')  || roles?.includes('AUDITOR') || roles?.includes('HIDDEN_DANGER')">
      <span class="dbTit">待办事项</span>
      <div class="fooItemWrap">
        <div class="fooItem" v-if="roles?.includes('SYS_ROOT')  || roles?.includes('AUDITOR')">
          
          <span class="number" :style="{color: peixunNum ? '#FF4026':'#999' }">{{ peixunNum || 0}}</span>
          <span class="title">培训待审核</span>
        </div>
        <div class="fooItem" v-if="roles?.includes('SYS_ROOT')  || roles?.includes('HIDDEN_DANGER')">
          <span class="number" :style="{color: yinhuan ? '#FF4026':'#999' }">{{ yinhuan || 0}}</span>
          <span class="title">隐患待分享</span>
        </div>
      </div>
    </div>

    
    <div>
      <img :src="iconShuaxin" class="shuaxinSty" @click="shuaxin"/>
    </div>
      
    </div>
</template>

<script lang="ts" setup>
import { trainingInfoList } from "@/api/apply";
import {
  pageHidden,
} from "@/api/randomClappingManage.ts";
import { onMounted, ref } from "vue";
import { userRegisteredTotal } from "@/api/user";
import iconShuaxin from "@/assets/images/icon_shuaxin.png";
import { ElLoading } from "element-plus";
import useUserStore from "@/store/useUserStore.ts";

const userStore = useUserStore();
const roles = ref([]);
onMounted(async () => {
  // console.log(userStore?.userData?.userInfoDto?.roles[0])
  roles.value = userStore?.userData?.userInfoDto?.roles
  await getList();
  await gePageHidden();
  await getUserRegisteredTotal();
});

const loadingInstance = ref();

const shuaxin = async() =>{

  window.location.reload();

  // const loadingInstance = ElLoading.service({fullscreen:true})
  // await getList();
  // await gePageHidden();
  // await getUserRegisteredTotal().finally(res=>{
  //   setTimeout(()=>{
  //     loadingInstance.close()
  //   },300)
  // });
  
}

const peixunNum = ref();
const getList = async() =>{
  const { data, msg, success } = await trainingInfoList({
    auditState: "1",
    pageNum: 1
  });
  peixunNum.value = data?.total
}

const yinhuan = ref();
const gePageHidden = async() =>{
  const { data, msg, success } = await pageHidden({
    isShare:"2",pageNun:1
  });

  yinhuan.value = data?.total
}

const regiest = ref({});
const getUserRegisteredTotal = async() =>{
  const { data, msg, success } = await userRegisteredTotal();
  regiest.value = data
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";

.mainWrap{
  display:flex;
  margin-bottom: 60px;
  background-color: #f0f2f5;
  border-radius: 16px;
}

.fWrap{
  flex: 1;
  background-color: #fff;
  margin: 12px;
  padding: 12px 24px 24px;
  border-radius: 12px;
}

.dbTit{
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 100px 24px;
}

.fooItemWrap{
  display: flex;
  margin-top: 24px;

  .fooItem{
    flex:1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  .number{
    font-size: 36px;
    color:#FF4026
  }

  .title{
    color: #666;
    margin-top: 12px;
  }
}
}

.shuaxinSty{
  width: 32px;
  height: 32px;
  padding: 24px;
  cursor: pointer;
}

</style>
